.date-picker__wrapper
  position: absolute
  z-index: 100
  top: 100%
  margin-top: 25px

.rdp
  background: white
  border-radius: 5px
  position: relative
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%)

  --rdp-cell-size: 45px
  --rdp-background-color: #ffe4b0
  --rdp-accent-color: #ffe4b0
  --rdp-outline: none

  &::before
    content: ''
    position: absolute
    border-bottom: 13px solid white
    border-inline: 7px solid transparent
    top: -13px
    left: calc(50% - 7px)

.rdp-caption_custom
  display: flex
  justify-content: space-between
  align-items: center
  border-bottom: 1px solid #cccccc

.rdp-caption_label_custom
  padding-block: 15px
  font-size: 32px
  text-transform: capitalize
  color: #333333

.rdp-nav_button_custom
  position: relative
  align-self: stretch
  flex-basis: 90px

  &_previous
    transform: matrix(-1, 0, 0, 1, 0, 0)

  &::before
    content: ''
    position: absolute
    top: calc(50% - 5px)
    right: 50px
    border-block: 5px solid transparent
    border-left: 6px solid #333333

  &:hover::before
    border-left-color: #FFA800

  &:disabled
    cursor: auto

    &::before
      border-left-color: #e6e6e6

.rdp-table
  margin: 10px 20px

.rdp-cell:nth-child(n+6) .rdp-day
  font-weight: 700

.rdp-day
  font-size: 20px
  font-weight: 500
  border-radius: 5px

  &:not(.rdp-day_outside):not(:disabled) span
    color: #333333

  &:disabled
    opacity: 1

    span
      color: #e6e6e6

  &_selected
    background: #ffe4b0
    border: 2px solid #FFA800

  &_today
    // border: 2px solid #FFA800

    &:not(.rdp-day_outside)
      font-weight: inherit

  &_outside
    &:not(:disabled) span
      color: #aaaaaa

    &:hover:not(:disabled), &.rdp-day_selected
      span
        color: #808080
